<template>
  <div
    class="card"
  >
    <div class="card__title">
      <div
        class="card__title__head"
        :class="{flexEnd:index === 1,flexStart:index === 0}"
      >
        <img :src="'https://oss.qiacaiba.com/screen/screen/' + data.img">
      </div>
      <div
        class="card__title__swiper"
        :class="{flexEnd:index === 1,flexStart:index === 0}"
      >
        <div
          v-for="(item,i) in data.tagImgs"
          :key="i"
          class="card__title__swiper__item"
          :class="{icon:item === 'rightIcon.png' || item === 'leftIcon.png'}"
          @click="changeSwiper(i,item)"
        >
          <img :src="'https://oss.qiacaiba.com/screen/screen/' + item">
          <section
            v-if=" (item !== 'rightIcon.png' || item !== 'leftIcon.png')"
            class="animation"
            :class="{active:i === swiperIndex }"
          />
        </div>
      </div>
    </div>
    <div
      class="card__swiper"
      @click="gorDetail"
    >
      <el-carousel
        ref="carouselRef"
        class="card__swiper__box"
        indicator-position="none"
        arrow="never"
        height="225px"
        :interval="6000"
        @change="onHandleSwiperChange"
      >
        <el-carousel-item
          v-for="item in props.data.swiperList"
          :key="item.id"
          class="card__swiper__box__item"
        >
          <el-image
            class="img"
            mode="aspectFill"
            :src="'https://oss.qiacaiba.com/screen/' + item.img"
          />
          <el-scrollbar
            height="180px"
            class="content "
          >
            {{ item.content }}
          </el-scrollbar>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const emits = defineEmits(["handClick"]);
const props = defineProps({
  data: {
    type: Object,
    default: () => {
    }
  },
  index: Number
});
const carouselRef = ref<any>(null);
const swiperIndex = ref<number>(0);
const changeSwiper = (i: number, item: string) => {
  if (item === 'rightIcon.png' || item === 'leftIcon.png') return false;
  carouselRef.value.setActiveItem(i === 3 ? 2 : i);
};
const onHandleSwiperChange = (e: number) => {
  if (props.index === 1) {
    if (e === 2) {
      swiperIndex.value = 3;
    } else {
      swiperIndex.value = e;
    }
  } else {
    swiperIndex.value = e;
  }
};
const gorDetail = () => {
  emits("handClick");
};
</script>

<style scoped lang="scss">
.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7; /* 限制最多显示3行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 可选，部分浏览器不生效 */
  word-break: break-word;
}

@keyframes changeWidth {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.card {
  width: 100%;
  margin-bottom: 30px;
  position: relative;
  z-index: 99999999999;

  .contentBg {
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url("@/assets/content_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    width: 100%;
    height: 500px;
  }

  .card__title {
    width: 100%;

    .card__title__head {
      display: flex;

      &.flexEnd {
        justify-content: flex-end;
      }

      &.flexStart {
        justify-content: flex-start;
      }

      img {
        width: 480px;
        height: 50px;
        display: block;
      }
    }

    .card__title__swiper {
      display: flex;
      flex-wrap: wrap;
      margin-top: 15px;

      &.flexEnd {
        justify-content: flex-end;
      }

      &.flexStart {
        justify-content: flex-start;
      }

      .card__title__swiper__item {
        width: 235px;
        height: 56px;
        display: flex;
        align-items: center;
        margin-right: 4px;
        margin-top: 14px;
        cursor: pointer;
        position: relative;
        z-index: 222;

        .animation {
          position: absolute;
          width: 0;
          height: 100%;
          left: 0;
          top: 0;
          z-index: 1;
          background: rgba(255, 255, 255, 0.3);
          transition: all .5s;

          &.active {
            width: 100%;
          }

        }

        &.icon {
          img {

            height: 30px;
          }
        }

        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }

  }

  .card__swiper {
    height: 225px;
    width: 100%;
    background-image: url("@/assets/swiper_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin-top: 13px;

    .card__swiper__box {
      height: 100%;

      .card__swiper__box__item {
        padding: 20px 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;

        .img {
          width: 200px;
          height: 180px;
          box-sizing: border-box;
          border: 2px solid #026AB1;
          display: block;
          object-fit: cover;
        }

        .content {
          width: 235px;
          background: #00497A;
          padding: 5px 10px;
          font-family: Source Han Sans;
          font-size: 16px;
          font-weight: bold;
          font-variation-settings: "opsz" auto;
          line-height: 25px;
          text-align: justify;
          color: #B7E2FF;
        }
      }
    }
  }
}
</style>
